<template>
  <div class="people_box">
    <div class="top">
      <h3>大家都在说</h3>
      <small>生活，没有统一标准</small>
    </div>
    <div class="bottom">
      <div>
        <div>
          <img
            src="https://yanxuan-item.nosdn.127.net/a856fdf29564b200a763324b19fa4efe.jpg?type=webp&quality=95&thumbnail=265x265&imageView"
            alt=""
          />
          <div>明天星期四</div>
        </div>
        <div>
          <img
            src="https://yanxuan-item.nosdn.127.net/e7f1b71194e59b9fde859113588a177d.png?type=webp&quality=95&thumbnail=265x265&imageView"
            alt=""
          />
          <div></div>
        </div>
        <div>
          <img
            src="https://yanxuan-item.nosdn.127.net/d53fba457b516c880ef36616fbc97738.jpg?type=webp&quality=95&thumbnail=265x265&imageView"
            alt=""
          />
          <div></div>
        </div>
        <div>
          <img
            src="https://yanxuan-item.nosdn.127.net/9d46f45807bdc15b803cb3e0e4eb9e54.jpg?type=webp&quality=95&thumbnail=265x265&imageView"
            alt=""
          />
          <div></div>
        </div>
        <div>
          <img
            src="https://yanxuan-item.nosdn.127.net/8b9d1671522b1551bbbdd02aacc922bf.jpg?type=webp&quality=95&thumbnail=265x265&imageView"
            alt=""
          />
          <div></div>
        </div>
        <div>
          <img
            src="https://yanxuan-item.nosdn.127.net/f180edf93eeeb26c222f86f4382aa8a2.jpg?type=webp&quality=95&thumbnail=265x265&imageView"
            alt=""
          />
          <div></div>
        </div>
      </div>
    </div>
    <div class="right_btn">
      <i class="iconfont icon-youbian"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "EveryBody",
};
</script>

<style lang="less" scoped>
.people_box {
  background-color: rgb(244, 240, 234);
  width: 1519.2px;
  height: 660px;
  margin: auto;
}
.people_box .top {
  width: 1090px;
  height: 48px;
  padding-top: 40px;
  margin: auto;
}
.people_box .top h3 {
  font-size: 28px;
  float: left;
}
.people_box .top small {
  font-size: 14px;
  display: inline-block;
  margin: 15px;
}
.people_box .bottom {
  width: 1090px;
  height: 492px;
  margin: auto;
  overflow: hidden;
  position: relative;
}
.people_box .bottom > div {
  width: 2230px;
  height: 492px;
  display: flex;
  justify-content: space-between;
  animation: swipe 10s linear infinite;
}
.people_box .bottom > div > div {
  width: 355px;
  height: 492px;
  background-color: white;
  position: relative;
  overflow: hidden;
}
.people_box .bottom > div > div img {
  height: 100%;
  width: 100%;
}
.people_box .bottom > div > div img:hover {
  transform: scale(1.1);
  transition: 1s;
}

.people_box .bottom > div > div > div {
  /* float: left; */
  width: 345px;
  height: 186px;
  margin: 0 5px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
}
.people_box .right_btn {
  width: 50px;
  height: 50px;
  display: block;
  border-radius: 50px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  background-color: rgb(226, 193, 153);
  background-position: 0px -5658px;
  position: relative;
  top: -300px;
  left: 1340px;
}
.people_box .right_btn:hover {
  background-color: #cc9756;
}
@keyframes swipe {
  /* 开始状态 */
  0% {
    margin-left: 0px;
  }
  /* 结束状态 */
  33.3% {
    margin-left: -355px;
  }
  66.7% {
    margin-left: -710px;
  }
  100% {
    margin-left: -1065px;
  }
}
</style>
